<template>
  <div class="menus-container">
    <div class="add-btn">
      <el-button type="primary" plain round @click="addDialog">新增</el-button>
    </div>
    <el-table
    :data="menuList"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="id"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="菜单标题"
      width="180">
    </el-table-column>
    <el-table-column
      prop="icon"
      label="菜单图标"
      width="180">
      <template v-slot="{row:{icon}}">
            <i :class="icon"></i>
        </template>
    </el-table-column>
    <el-table-column
          prop="url"
          label="菜单地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="菜单状态"
          width="180">
          <template v-slot="{row:{status}}">
            <el-button type="primary" size="mini" round plain v-if="status===1">正常</el-button>
            <el-button v-else type="info" size="mini" round plain>禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template v-slot="prop">
            <el-button type="warning" size="mini" plain @click="editMenu(prop)">编辑</el-button>
            <el-button type="primary" size="mini" plain @click="delMenu(prop)">删除</el-button>
          </template>
        </el-table-column>
  </el-table>
      <MenuDialog  ref="menuDialog" :boxShow="boxShow"></MenuDialog>
  </div>
</template>

<script>
import {mapState, mapActions} from "vuex"
import MenuDialog from "./MenuDialog.vue"

export default {
  created() {
    this.initMenuListActions()
  },
  computed: {
    ...mapState('menus', ['menuList'])
  },
  methods: {
    ...mapActions('menus', ['initMenuListActions','deleteMenuActions']),
    show(prop){
      console.log(prop)
    },
    addDialog() {
      this.boxShow.isShow=true
    },
    editMenu(prop) { 
      this.$refs.menuDialog.menuForm = {...prop.row}  // 表单数据初始化 
      this.boxShow.isShow = true  // 打开弹窗
    },
    delMenu(prop) {
      let result = confirm("确定要删除这条菜单吗？")
      if(!result) return
      this.deleteMenuActions(prop.row.id)  // 根据id删除菜单
    }
  },
  components: {
    MenuDialog
  },
  data() {
    return {
      boxShow: {
        isShow: false
      }
    }
  }

}
</script>

<style scoped>
.add-btn{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>